<template>
  <div class="choose">
    <template v-if="type == 1">
      <div class="project-container">
        <div class="project-item">
          <img
            v-if="chooseNum.one == 0"
            src="./assets/kemu-01.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('one')"
          />
          <img
            v-else
            src="./assets/kemu-01dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('one')"
          />
          <div class="right-num" v-if="chooseNum.one > 0">
            {{ chooseNum.one }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.two == 0"
            src="./assets/kemu-02.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('two')"
          />
          <img
            v-else
            src="./assets/kemu-02dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('two')"
          />
          <div class="right-num" v-if="chooseNum.two > 0">
            {{ chooseNum.two }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.three == 0"
            src="./assets/kemu-03.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('three')"
          />
          <img
            v-else
            src="./assets/kemu-03dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('three')"
          />
          <div class="right-num" v-if="chooseNum.three > 0">
            {{ chooseNum.three }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.four == 0"
            src="./assets/kemu-04.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('four')"
          />
          <img
            v-else
            src="./assets/kemu-04dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('four')"
          />
          <div class="right-num" v-if="chooseNum.four > 0">
            {{ chooseNum.four }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.five == 0"
            src="./assets/kemu-05.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('five')"
          />
          <img
            v-else
            src="./assets/kemu-05dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('five')"
          />
          <div class="right-num" v-if="chooseNum.five > 0">
            {{ chooseNum.five }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.six == 0"
            src="./assets/kemu-06.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('six')"
          />
          <img
            v-else
            src="./assets/kemu-06dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('six')"
          />
          <div class="right-num" v-if="chooseNum.six > 0">
            {{ chooseNum.six }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.seven == 0"
            src="./assets/kemu-07.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('seven')"
          />
          <img
            v-else
            src="./assets/kemu-07dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('seven')"
          />
          <div class="right-num" v-if="chooseNum.seven > 0">
            {{ chooseNum.seven }}
          </div>
        </div>
        <div class="project-item">
          <img
            v-if="chooseNum.eight == 0"
            src="./assets/kemu-08.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('eight')"
          />
          <img
            v-else
            src="./assets/kemu-08dianji.png"
            alt=""
            class="pro-img"
            @click="handleShowNumTask('eight')"
          />
          <div class="right-num" v-if="chooseNum.eight > 0">
            {{ chooseNum.eight }}
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="map">
        <div
          class="map-item"
          @click="handleShowNumTask('one')"
          :class="{ active: chooseNum.one > 0 }"
        >
          <span class="text">月罗地区</span>
          <span class="map-num" v-if="chooseNum.one > 0">{{
            chooseNum.one
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('two')"
          :class="{ active: chooseNum.two > 0 }"
        >
          <span class="text">顾村地区</span>
          <span class="map-num" v-if="chooseNum.two > 0">{{
            chooseNum.two
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('three')"
          :class="{ active: chooseNum.three > 0 }"
        >
          <span class="text">淞宝地区</span>
          <span class="map-num" v-if="chooseNum.three > 0">{{
            chooseNum.three
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('four')"
          :class="{ active: chooseNum.four > 0 }"
        >
          <span class="text">南大地区</span>
          <span class="map-num" v-if="chooseNum.four > 0">{{
            chooseNum.four
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('five')"
          :class="{ active: chooseNum.five > 0 }"
        >
          <span class="text">共江地区</span>
          <span class="map-num" v-if="chooseNum.five > 0">{{
            chooseNum.five
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('six')"
          :class="{ active: chooseNum.six > 0 }"
        >
          <span class="text">普北地区</span>
          <span class="map-num" v-if="chooseNum.six > 0">{{
            chooseNum.six
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('seven')"
          :class="{ active: chooseNum.seven > 0 }"
        >
          <span class="text">中原地区</span>
          <span class="map-num" v-if="chooseNum.seven > 0">{{
            chooseNum.seven
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('eight')"
          :class="{ active: chooseNum.eight > 0 }"
        >
          <span class="text">静北地区</span>
          <span class="map-num" v-if="chooseNum.eight > 0">{{
            chooseNum.eight
          }}</span>
        </div>
        <div
          class="map-item"
          @click="handleShowNumTask('nine')"
          :class="{ active: chooseNum.nine > 0 }"
        >
          <span class="text">普南地区</span>
          <span class="map-num" v-if="chooseNum.nine > 0">{{
            chooseNum.nine
          }}</span>
        </div>
      </div>
    </template>
    <!-- 数字弹窗 -->
    <div class="num-task" v-if="showNumTask">
      <div class="task-text">当前故障数量选择</div>
      <div
        class="num-item"
        :class="{ active: numIndex == 1 }"
        @click="handleClickNum(1)"
      >
        1
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 2 }"
        @click="handleClickNum(2)"
      >
        2
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 3 }"
        @click="handleClickNum(3)"
      >
        3
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 4 }"
        @click="handleClickNum(4)"
      >
        4
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 5 }"
        @click="handleClickNum(5)"
      >
        5
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 6 }"
        @click="handleClickNum(6)"
      >
        6
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 7 }"
        @click="handleClickNum(7)"
      >
        7
      </div>
      <div
        class="num-item"
        :class="{ active: numIndex == 8 }"
        @click="handleClickNum(8)"
      >
        8
      </div>
      <div
        v-if="route.query.type == 1"
        class="num-item"
        :class="{ active: numIndex == 9 }"
        @click="handleClickNum(9)"
      >
        9
      </div>
    </div>
    <!-- 数字弹窗下 出现的确定按钮 -->
    <div class="primary-btn" v-if="showNumTask" @click="confirmChooseNum"></div>
    <!-- 数字按钮点击之后出现的确定按钮 -->
    <div
      class="primary-btn"
      v-if="
        !showNumTask &&
        (chooseNum.one > 0 ||
          chooseNum.two > 0 ||
          chooseNum.three > 0 ||
          chooseNum.four > 0 ||
          chooseNum.five > 0 ||
          chooseNum.six > 0 ||
          chooseNum.seven > 0 ||
          chooseNum.eight > 0 ||
          chooseNum.nine > 0)
      "
      @click="handleResult"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const type = ref(route.query.type);
const chooseNum = ref({
  one: 0,
  two: 0,
  three: 0,
  four: 0,
  five: 0,
  six: 0,
  seven: 0,
  eight: 0,
  nine: 0,
});
// 点击出现数字弹窗
const showNumTask = ref(false);
const phPosition = ref("");
const handleShowNumTask = (pos) => {
  showNumTask.value = true;
  numIndex.value = 0;
  phPosition.value = pos;
};
const numIndex = ref(0);
const handleClickNum = (index) => {
  if (numIndex.value === index) {
    numIndex.value = "";
  } else {
    numIndex.value = index;
  }
};
const confirmChooseNum = () => {
  chooseNum.value[phPosition.value] = numIndex.value;
  showNumTask.value = false;
};
// 点击地图
const mapIndex = ref();
const handleClickMapNum = (index) => {
  mapIndex.value = index;
};
const handleResult = () => {
  let list = [];
  const valueArr = {
    one: "01",
    two: "02",
    three: "03",
    four: "04",
    five: "05",
    six: "06",
    seven: "07",
    eight: "08",
    nine: "09",
  };
  for (let i in chooseNum.value) {
    if (chooseNum.value[i] > 0) {
      list.push({
        value: valueArr[i],
        number: chooseNum.value[i],
      });
    }
  }
  router.push({
    path: "/result",
    query: {
      type: route.query.type,
      choose: JSON.stringify(list),
    },
  });
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.choose {
  width: 1920px;
  height: 1080px;
  position: relative;
  .map {
    width: 742px;
    height: 685px;
    background: url(./assets/ditu-01.png) no-repeat top center / 100%;
    position: absolute;
    top: 49%;
    left: 52%;
    transform: translate(-50%, -50%);
    .map-item {
      width: 177px;
      height: 88px;
      background: url(./assets/ditu-02.png) no-repeat top center / 100%;
      color: #fff;
      padding-left: 68px;
      padding-top: 16px;
      font-size: 14px;
      cursor: pointer;
      &.active {
        color: #5cf8fe;
      }
      .map-num {
        position: absolute;
        top: 5px;
        right: 0;
        width: 47px;
        height: 37px;
        background: url(./assets/ditu-03.png) no-repeat top center / 100%;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 24px;
        font-family: DINPro;
      }
      &:first-child {
        position: absolute;
        left: 16%;
        top: 11%;
      }
      &:nth-child(2) {
        position: absolute;
        left: 13%;
        top: 31%;
      }
      &:nth-child(3) {
        position: absolute;
        left: 48%;
        top: 27%;
      }
      &:nth-child(4) {
        position: absolute;
        left: 10%;
        top: 47%;
      }
      &:nth-child(5) {
        position: absolute;
        left: 63%;
        top: 35%;
      }
      &:nth-child(6) {
        position: absolute;
        left: 18%;
        top: 56%;
      }
      &:nth-child(9) {
        position: absolute;
        left: 25%;
        top: 70%;
      }
      &:nth-child(8) {
        position: absolute;
        left: 50%;
        top: 58%;
      }
      &:nth-child(7) {
        position: absolute;
        left: 77%;
        top: 48%;
      }
    }
  }
  .project-container {
    position: absolute;
    top: 20%;
    left: 15%;
    right: 10%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 90px;
    .project-item {
      width: 275px;
      height: 285px;
      position: relative;
      cursor: pointer;
      .pro-img {
        width: 100%;
        height: 100%;
      }
      .right-num {
        position: absolute;
        top: 42px;
        right: 30px;
        color: #fff;
        font-size: 24px;
        background: url(./assets/kemu-10jiaobiao.png) no-repeat right center /
          100%;
        width: 46px;
        height: 46px;
        text-align: center;
        line-height: 44px;
      }
    }
  }
  .num-task {
    position: absolute;
    top: 45%;
    left: 51%;
    transform: translate(-50%, -50%);
    width: 1250px;
    height: 350px;
    background-color: rgba(0, 33, 56, 0.9);
    border: 2px solid #5ed5fc;
    box-shadow: 0 0 1px #259dcf;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    .task-text {
      position: absolute;
      left: 50%;
      top: 8%;
      color: #fff;
      font-size: 32px;
      transform: translateX(-50%);
    }
    .num-item {
      padding: 0 20px;
      background-color: #01162a;
      //   color: #093b5d;
      color: #52d3eb;
      font-size: 80px;
      font-family: DINPro;
      border: 1px solid transparent;
      cursor: pointer;
      &.active {
        color: #52d3eb;
        border-color: #57c7ed;
        background-color: rgba(9, 59, 93, 0.9);
      }
    }
  }
  .primary-btn {
    position: absolute;
    bottom: 10%;
    left: 50.5%;
    transform: translateX(-50%);
    width: 213px;
    height: 75px;
    background: url(./assets/primary-btn.png) no-repeat top center / 100%;
    cursor: pointer;
  }
}
</style>
